import {Component} from 'react';

import {Collapse, Group, Boxs} from 'saltui';
// import Icon from 'salt-icon';
const { HBox, Box } = Boxs;

class MeetTimeList extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const lists = this.props.list.map((item, index) => {
            let width = item.width;
            let left = item.left;
            let stype = {width:width+'%',left: left+"%","z-index": 0};
            if(item.type=='0'){
                stype = {width:width+'%',left: left+"%"};
            }
            return (
                    <li className={item.type=='0' ? 't-BCe8ebee' : (item.type=='2' ? 't-BCoranger' : 't-BCcyan')} style={stype}>
                    </li> 
            );
        });

        return (
            <Group>
                <Group.List title="">
                <ul className="dd-t-time-distribution t-BCcyan">
                    {lists}
                    </ul>
                </Group.List>
            </Group>
        );
    }
}

class SwitchGroupList extends Component {
    constructor(props) {
        super(props);
    }
    detailsClick(id){      
        var url ='meeting/boardRoom/'+id+'/'+this.props.currentDate;
      location.hash=url;
           
    }
    render() {
        const lists = this.props.list.map((item, index) => {
            console.log(item);
            var itemId = item.boardroomSet.id;
            return (
                <div>
                    {/*<div>
                          <div className="collapse-content-demo">
                              <div className="dd-t-list-wrap" onClick={()=>{this.detailsClick(itemId)}}>
                                <HBox vAlign="center">
                                  <HBox flex={1}>
                                    <Box  className="dd-t-list-meeting">
                                      <i className="iconfont icon-tab-meeting t-FS30 t-LH35" style={{color:'#c8c8c8'}}></i>
                                    </Box>
                                    <Box className="dd-t-list-text-content" flex={1}>
                                        <p className="dd-t-list-title t-omit t-MR12">{item.boardroomSet.name}</p>
                                        <div className="dd-t-list-time t-FBAC">
                                          <i className="iconfont icon-time t-FCc t-MR4" style={{fontSize:14}}></i>
                                          <span className="t-list-text t-MR12">{item.boardroomSet.startTime}~{item.boardroomSet.endTime}</span>
                                          <i className="iconfont icon-user t-FCd t-MR4" style={{fontSize:14}}></i>
                                          <span className="t-list-text t-MR4">可容纳{item.boardroomSet.count}人</span>
                                        </div>
                                    </Box>
                                  </HBox>
                                </HBox>
                              </div>
                              <MeetTimeList list={item.applyRecordListMap} />
                              <ul className="dd-t-time-tips">
                                <li flex="1">00:00</li>
                                <li flex="1">06:00</li>
                                <li flex="1">12:00</li>
                                <li flex="1">18:00</li>
                                <li flex="1">24:00</li>
                              </ul>
                              <ul className="dd-t-time-tips">
                                <li flex="1" className="t-FBAC"><span className="t-WH10 t-BCf"></span>可预约</li>
                                <li flex="1" className="t-FBAC"><span className="t-WH10 t-BCoranger"></span>已占用</li>
                                <li flex="1" className="t-FBAC"><span className="t-WH10 t-BCc"></span>已禁用</li>
                              </ul>
                            </div>  

                        </div>*/}
                    <div className="t-PL16">
                        <div onClick={()=>{this.detailsClick(itemId)}}>  
                            <HBox flex={1} vAlign="center" className="t-PL16 t-PR16 t-PT10">
                              <Box><i className="iconfont icon-place t-FS14 t-FCddfontblue-60"></i></Box>
                              <Box className="t-FC3 t-FS14 t-PR10 t-PL4 t-omit" style={{width:'40%'}}>{item.boardroomSet.name}</Box>
                              <Box className="t-FS12 t-PR4">{item.boardroomSet.startTime}~{item.boardroomSet.endTime}</Box>
                              <Box className="dd-left-border t-H10"></Box>
                              <Box className="t-FS12 t-PL4">可容纳{item.boardroomSet.count}人</Box>
                            </HBox>
                        </div>
                        <MeetTimeList list={item.applyRecordListMap} />
                        <ul className="dd-t-time-tips">
                            <li flex="1">00:00</li>
                            <li flex="1">08:00</li>
                            <li flex="1">16:00</li>
                            <li flex="1">24:00</li>
                        </ul>
                        <HBox className="t-PB10 t-FS12 t-PL16" >
                            <HBox vAlign="center" className="t-MR12"><Box className="t-WH10 t-R3 t-BCcyan t-MR4"></Box><Box>可预约</Box></HBox>
                            <HBox vAlign="center" className="t-MR12"><Box className="t-WH10 t-R3 t-BCoranger t-MR4"></Box><Box>已占用</Box></HBox>
                            <HBox vAlign="center"><Box className="t-WH10 t-R3 t-BCe8ebee t-MR4"></Box><Box>已禁用</Box></HBox>
                        </HBox>
                    </div>
                </div>
            );
        });
        return (
            <Group>
                <Group.List title="">
                    {lists}
                </Group.List>
            </Group>
        );
    }
}

export default class FlowClassifySwitch extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    onChange() {
        console.log('click collapse!');
    }

    meetingOnclick(){

    }

    meetTimeList() {

    }


    render() {
        let t = this;
        const classifyHtml = this.props.meetingData.map((item, index) => {
            let header =  (<div className="t-omit t-PR8">{item.category.name}</div>);
            return (
                <Collapse.Panel key={index} header={header} headerClass="my-header-class">
                      <SwitchGroupList currentDate={t.props.currentDate}
                        list={item.boardroomList}
                        onClick={this.props.onSwitch}
                    />
                </Collapse.Panel>
            );
        });
        const headers = 'tlksd';

        
        return (
            <Collapse
                accordion
                // header={headers}
                defaultActiveKey={'0'}
                onChange={this.onChange}
            >
               {classifyHtml}
            </Collapse>
        );
    }
}
